<template>
	<view class="card">
		<view class="card_item" v-for="(item,index) in list" :key="index" @tap="goDetail(item)">
			<view class="card_template" v-if="item.images && item.images.length==1">
				<view class="left">
					<view class="title"><text class="text">{{item.newsName}}</text></view>
					<view class="info">
						<view class="day">{{item.newsCreateDate | toDate('yyyy-MM-dd hh:mm')}}</view>
						<view class="count" v-if="item.newsReadNum">{{item.newsReadNum}}阅读</view>
						<view class="count" v-else>0阅读</view>
					</view>
				</view>
				<image class="image" v-for="(fileItem,fileIndex) in item.images" :key="fileIndex" :src="fileItem" mode=""></image>
			</view>
			<view v-if="item.images && item.images.length>=2" class="card_template template_image">
				<view class="title"><text class="text">{{item.newsName}}</text></view>
				<view class="image_panel">
					<image class="image" v-for="(fileItem,fileIndex) in item.images" :key="fileIndex" :src="fileItem" mode=""></image>
				</view>
				<view class="info">
					<view class="day">{{item.newsCreateDate | toDate('yyyy-MM-dd hh:mm')}}</view>
					<view class="count" v-if="item.newsReadNum">{{item.newsReadNum}}阅读</view>
					<view class="count" v-else>0阅读</view>
				</view>
			</view>
			<view class="card_template template_image" v-if="!item.images || item.images.length<=0">
				<view class="title"><text class="text" style="margin-bottom: 20rpx;">{{item.newsName}}</text></view>
				<view class="info">
					<view class="day">{{item.newsCreateDate | toDate('yyyy-MM-dd hh:mm')}}</view>
					<view class="count" v-if="item.newsReadNum">{{item.newsReadNum}}阅读</view>
					<view class="count" v-else>0阅读</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import { HTTP_SERVER_URL } from '@/config';
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		data() {
			return {
			}
		},
		methods: {
			goDetail(data) {
				uni.navigateTo({
					url: `/pages/index/news/newsDetail/newsDetail?id=${data.newsId}`
				});
			}
		}
	}
</script>

<style lang="stylus">
	.card {
		width: 100%;

		.card_item {
			width: 100%;

			&:first-child {
				.card_template {
					padding-top: 0rpx;
				}
				
			}

			.template_image {
				flex-direction: column;

				.image {
					margin-top: 10rpx;
				}
			}

			.card_template {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 25rpx 0rpx;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					right: 0;
					left: 0;
					height: 2rpx;
					background-color: rgba(240, 240, 240, 1);
				}

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-right: 20rpx;

				}

				.title {
					flex: 1;
					width: 100%;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					letter-spacing: 1rpx;
					line-height: 48rpx;

					.text {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
						-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
						-webkit-line-clamp: 2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
						word-wrap: break-word;

					}
				}

				.info {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;

					.day,
					.count {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.image_panel {
					display: flex;
					width: 100%;
				}

				.image {
					width: 230rpx;
					height: 165rpx;
					border-radius: 5rpx;
					margin-right: 10rpx;

					&:last-child {
						margin-right: 0rpx;
					}
				}
			}
		}
	}
</style>
